<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left"  >
					<button plain class="back-btn" @click="goBack">返回</button>
				</view>
				<view slot="center" class="u-nav-slot-center">
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">人教新目标版(2022_七下</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">Unit1</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">习题</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">预习</span>
					</button>
				</view>
				<view slot="right" class="flex-align-center">
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">错题本</span>
					</button>
					<button plain class="back-btn flex-center" style="margin-left: 30rpx;">
						<span style="padding-top: 5rpx;">习题测试</span>
					</button>
				</view>
			</u-navbar>
		</view>
		<view class="content">
			<view class="content-son">
				<view class="content-son-item">
					<view class="content-son-item-title"> 基础习题 </view>
					<image src="@/static/images/review/tigao.png"></image>
					<view class="content-son-item-title" style="color: #7A7979;"> 未测 </view>
				</view>
				<view class="content-son-item">
					<view class="content-son-item-title"> 提高习题 </view>
					<image src="@/static/images/review/tigao.png"></image>
					<view class="content-son-item-title" style="color: #7A7979;"> 未测 </view>
				</view>
				<view class="content-son-item">
					<view class="content-son-item-title"> 音标辨认 </view>
					<image src="@/static/images/review/tigao.png"></image>
					<view class="content-son-item-title" style="color: #7A7979;"> 未测 </view>
				</view>
			</view>
		</view>
		<view class="index-right-footer flex-between">
			<span>今日学习效率：0%(00:00/00:00)</span>
			<span>今日词汇记忆 时长:00:00 数量:0个 速度:0个/小时</span>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {


			};
		},
		methods: {
			goBack() {
				this.$common.goBack()
			},
			tabChange(val) {
				console.log(val);
				this.current = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: radial-gradient(97.5% 97.5% at 50% 50.583333333333336%, rgba(34, 45, 245, 1) 0%, rgba(110, 117, 245, 1) 100%);
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

		button {
			margin-right: 27rpx;
			height: px_2_vw(40) !important;
			padding: 0 12rpx !important;
		}

	}

	.u-nav-slot-right {}

	.content {
		margin: 0 auto;
		width: 90%;
		padding: 20rpx;
		height: px_2_vw(847);
		background: rgba(113, 120, 248, 1);
		border-radius: 30rpx;

		.content-son {
			height: 100%;
			width: 100%;
			// background: rgba(217, 215, 215, 1);
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx 80rpx;

			.content-son-item {
				height: px_2_vw(536);
				width: px_2_vw(434);
				background: #fff;
				border-radius: 55rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					height: px_2_vw(217);
					width: px_2_vw(217);
					margin: 60rpx 0 34rpx 0;
				}

				.content-son-item-title {

					font-weight: 600;
					font-size: px_2_vw(48);

				}
			}
		}
	}

	// 底部
	.index-right-footer {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		bottom: 37rpx;
		width: 80%;
		left: 10%;
	}
</style>